﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!-- 导入 标准标签库的核心标签，格式化标签 -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE HTML>
<html>
<head>
<%@include file="_header.jsp"%>
<title>管理员列表</title>
</head>
<body>
	<nav class="breadcrumb">
		<i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span>
		管理员管理 <span class="c-gray en">&gt;</span> 管理员列表 <a
			class="btn btn-success radius r"
			style="line-height: 1.6em; margin-top: 3px"
			href="javascript:location.replace(location.href);" title="刷新"><i
			class="Hui-iconfont">&#xe68f;</i></a>
	</nav>
	<div class="page-container">
		<div class="text-c">
			日期范围： <input type="text"
				onfocus="WdatePicker({ maxDate:'#F{$dp.$D(\'datemax\')||\'%y-%M-%d\'}' })"
				id="datemin" class="input-text Wdate" style="width: 120px;">
			- <input type="text"
				onfocus="WdatePicker({ minDate:'#F{$dp.$D(\'datemin\')}',maxDate:'%y-%M-%d' })"
				id="datemax" class="input-text Wdate" style="width: 120px;">
			<input type="text" class="input-text" style="width: 250px"
				placeholder="输入管理员名称" id="" name="">
			<button type="submit" class="btn btn-success" id="" name="">
				<i class="Hui-iconfont">&#xe665;</i> 搜用户
			</button>
		</div>
		<div class="cl pd-5 bg-1 bk-gray mt-20">
			<span class="l"><a href="javascript:;" onclick="datadel()"
				class="btn btn-danger radius"><i class="Hui-iconfont">&#xe6e2;</i>
					批量删除</a> <a href="javascript:;"
				onclick="admin_add('添加管理员','${pageContext.request.contextPath}/sys/admin/add','800','500')"
				class="btn btn-primary radius"><i class="Hui-iconfont">&#xe600;</i>
					添加管理员</a></span>
		</div>
		<table
			class="table table-border table-bordered table-bg table-sort table-responsive">
			<thead>
				<tr>
					<th scope="col" colspan="9">员工列表</th>
				</tr>
				<tr class="text-c">
					<th width="25"><input type="checkbox" class="checkall"></th>
					<th width="40">ID</th>
					<th width="150">登录名</th>
					<th width="90">手机</th>
					<th width="150">邮箱</th>
					<th width="90">性别</th>
					<th width="90">角色</th>
					<th width="90">头像</th>
					<th width="90">住址</th>
					<th width="130">加入时间</th>
					<th width="100">是否已启用</th>
					<th width="100">操作</th>
				</tr>
			</thead>
			<tbody>
				<c:forEach items="${pager.rows}" var="admin">
					<tr class="text-c">
						<td><input type="checkbox" name="id" value="${admin.id}"></td>
						<td>${admin.id}</td>
						<td>${admin.account}</td>
						<td><c:if test="${admin.mobile != null}">${admin.mobile}</c:if>
							<c:if test="${admin.mobile == null}">无</c:if></td>
						<td><c:if test="${admin.email != null}">${admin.email}</c:if>
							<c:if test="${admin.email == null}">无</c:if></td>
						<td>${admin.sex==1?"男":"女"}</td>
						<td>${admin.role.name}</td>
						<td><img src="${pageContext.request.contextPath}/upload/${admin.headImage}" height="50px" /></td>
						<td>${admin.address}</td>
						<td><fmt:formatDate value="${admin.hireDate}"
								pattern="yyyy-MM-dd" /></td>
						<td class="td-status"><c:choose>
								<c:when test="${admin.status==1 }">
									<span class="label label-success radius">已激活</span>
								</c:when>
								<c:when test="${admin.status==2 }">
									<span class="label label-danger radius">已禁用</span>
								</c:when>
								<c:otherwise>
									<span class="label label-default radius">未激活</span>
								</c:otherwise>
							</c:choose></td>

						<td class="td-manage"><c:choose>
								<c:when test="${admin.status==1 }">
									<a style="text-decoration: none"
										onClick="admin_stop(this,'${admin.id}')" href="javascript:;"
										title="离职停用"> <i class="Hui-iconfont">&#xe631;</i>
									</a>
								</c:when>
								<c:otherwise>
									<a style="text-decoration: none"
										onClick="admin_start(this,'${admin.id}')" href="javascript:;"
										title="激活启用"> <i class="Hui-iconfont">&#xe615;</i>
									</a>
								</c:otherwise>
							</c:choose> <a title="编辑" href="javascript:;"
							onclick="admin_edit('管理员编辑','${pageContext.request.contextPath}/sys/admin/edit/${admin.id}','1','800','500')"
							class="ml-5" style="text-decoration: none"> <i
								class="Hui-iconfont">&#xe6df;</i>
						</a> <a title="删除" href="javascript:;"
							onclick="admin_del(this,'${admin.id}')" class="ml-5"
							style="text-decoration: none"> <i class="Hui-iconfont">&#xe6e2;</i>
						</a></td>
					</tr>
				</c:forEach>

			</tbody>
		</table>
	</div>
<%@ include file="_footer.jsp"%>

	<!--请在下方写此页面业务相关的脚本-->
	<script type="text/javascript"
		src="${pageContext.request.contextPath}/lib/My97DatePicker/4.8/WdatePicker.js"></script>
	<script type="text/javascript"
		src="${pageContext.request.contextPath}/lib/datatables/1.10.15/jquery.dataTables.min.js"></script>
	<script type="text/javascript"
		src="${pageContext.request.contextPath}/lib/datatables/1.10.15/dataTables.select.min.js"></script>
	<script type="text/javascript"
		src="${pageContext.request.contextPath}/lib/laypage/1.2/laypage.js"></script>
	<script type="text/javascript">
		var table = $('.table-sort').DataTable({
			"aaSorting" : [ [ 0, "desc" ] ],
			//默认第几个排序
			"bStateSave" : true,
			//状态保存
			"pading" : false,
			"pagingType" : "full_numbers",
			"aoColumnDefs" : [
			// {"bVisible": false, "aTargets": [ 3 ]}, //控制列的隐藏显示
			{
				"orderable" : false,
				"aTargets" : [ 0, 8 ]
			} // 不参与排序的列
			],
			select : {
				style : 'multi',
				selector : 'td:first-child',
			}
		});

		/*
				 参数解释：
				 title	标题
				 url		请求的url
				 id		需要操作的数据id
				 w		弹出层宽度（缺省调默认值）
				 h		弹出层高度（缺省调默认值）
		 */
		/*管理员-增加*/
		function admin_add(title, url, w, h) {
			layer_show(title, url, w, h);
		}
		/*管理员-删除*/
		function admin_del(obj, id) {
			layer.confirm('确认要删除吗？', function(index) {
				$.ajax({
					type : 'POST',
					url : '${pageContext.request.contextPath}/sys/admin/del',
					data : {
						id : id
					},
					dataType : 'json',
					success : function(a) {
						if (a.success) {
							//删除数据没有刷新页面，直接删除页面的html代码
							$(obj).parents("tr").remove();
							layer.msg('已删除!', {
								icon : 1,
								time : 1000
							});
						} else {
							layer.msg(a.errorMsg, {
								icon : 1,
								time : 1000
							});
						}

					},
					error : function(data) {
						console.log(data.msg);
					},
				});
			});
		}

		/*管理员-编辑*/
		function admin_edit(title, url, id, w, h) {
			layer_show(title, url, w, h);
		}
		/*管理员-停用*/
		function admin_stop(obj, id) {
			layer
					.confirm(
							'确认要停用吗？',
							function(index) {
								//此处请求后台程序，下方是成功后的前台处理……
								$
										.post(
												"${pageContext.request.contextPath}/sys/admin/status",
												{
													id : id,
													status : 2
												},
												function(data) {

													if (data.success) {
														$(obj)
																.parents("tr")
																.find(
																		".td-manage")
																.prepend(
																		'<a onClick="admin_start(this,'
																				+ id
																				+ ')" href="javascript:;" title="启用" style="text-decoration:none"><i class="Hui-iconfont">&#xe615;</i></a>');
														$(obj)
																.parents("tr")
																.find(
																		".td-status")
																.html(
																		'<span class="label label-danger radius">已禁用</span>');
														$(obj).remove();
														layer.msg('已停用!', {
															icon : 5,
															time : 1000
														});
													} else {
														layer.msg(
																data.errorMsg,
																{
																	icon : 5,
																	time : 1000
																});
													}
												});
							});
		}

		/*管理员-启用*/
		function admin_start(obj, id) {
			layer
					.confirm(
							'确认要启用吗？',
							function(index) {
								//此处请求后台程序，下方是成功后的前台处理……
								$
										.post(
												"${pageContext.request.contextPath}/sys/admin/status",
												{
													id : id,
													status : 1
												},
												function(data) {
													if (data.success) {
														$(obj)
																.parents("tr")
																.find(
																		".td-manage")
																.prepend(
																		'<a onClick="admin_stop(this,'
																				+ id
																				+ ')" href="javascript:;" title="停用" style="text-decoration:none"><i class="Hui-iconfont">&#xe631;</i></a>');
														$(obj)
																.parents("tr")
																.find(
																		".td-status")
																.html(
																		'<span class="label label-success radius">已启用</span>');
														$(obj).remove();
														layer.msg('已启用!', {
															icon : 6,
															time : 1000
														});
													} else {
														layer.msg(
																data.errorMsg,
																{
																	icon : 5,
																	time : 1000
																});
													}
												});
							});
		}

		function datadel() {
			table.rows().select();
			console.log(table)
		}
	</script>
</body>
</html>